.container{
  width: 100%;
  padding: 16px;
}

.base-info{
  position: relative;

  .image-holder{
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    border: 1px solid var(--gray-X);
    border-radius: 4px;
    overflow: hidden;

    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      vertical-align: middle;
    }
  }

  .info-list{
    position: relative;
    width: 100%;

    .info{
      position: relative;
      display: flex;
      align-items: flex-start;
      min-height: 28px;
      padding: 6px 0;

      .label{
        min-width: 35px;
        color: var(--gray-7);
      }

      .value{
        color: var(--gray-9);
        word-break: break-word;
        
        .tag{
          display: inline-block;
          margin: 0 4px 2px 0;
          border: 1px solid var(--gray-8);
          padding: 4px 8px;
          line-height: 1em;
          border-radius: 24px;
          a{
            color: inherit;
            text-decoration: none;
            transition: none !important;
            &:hover,
            &:active,
            &:visited {
                color: inherit;
                text-decoration: none;
            }
          }
          &:hover{
            background: var(--main-10);
            border-color: var(--main-10);
            color: var(--white);
          }
        }

        :global .ant-typography{
          white-space: pre-wrap;
        }

        a:not(.tag a){
          color: #428AB8;

          &:hover {
              text-decoration: underline;
          }
        }
      }

      .desc{
        min-height: 48px;
      }
    }
  }

}

.history{
  position: relative;

  &>h3{
    margin-bottom: 12px;
  }

  .list{

    .item{
      display: grid;
      grid-template-columns: 1fr 200px;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--gray-2);

      .col-user{
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;

        .avatar{
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background-color: var(--gray-2);
          display: inline-block;
          overflow: hidden;

          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            vertical-align: middle;
          }
        }

        .nickname{
          color: var(--gray-8);
        }

        &:hover{
          .nickname{
            text-decoration: underline;
          }
        }
      }

      .col-time{
        text-align: right;
        color: var(--gray-8);
      }

      &:last-child{
        border-bottom: none;
      }
    }
  }
}